<template>
	<view class="content" v-if="invoiceDetail">
		<!-- 发票信息 -->
		<view class="invoice-info box">
			<text class="section-title">发票信息</text>
			<view class="info-row">
				<text>申请时间</text>
				<text class="info-value">{{ invoiceDetail.createTime | formatTimes }}</text>
			</view>
			<view class="info-row">
				<text>开票状态</text>
				<text class="info-value status">{{ invoiceDetail.status == 1 ? '开票中' : '已完成' }}</text>
			</view>
			<view class="info-row">
				<text>开票内容</text>
				<text class="info-value status">{{ invoiceDetail.invoiceContent }}</text>
			</view>
			<view class="info-row">
				<text>发票类型</text>
				<text class="info-value">{{ invoiceDetail.invoiceType }}</text>
			</view>
			<view class="info-row">
				<text>开票金额</text>
				<text class="info-value">￥{{ invoiceDetail.amount }}</text>
			</view>
			<view class="info-row">
				<text>发票抬头</text>
				<text class="info-value">{{ invoiceDetail.invoiceTitle }}</text>
			</view>
			<view class="info-row">
				<text>纳税人识别号</text>
				<text class="info-value">{{ invoiceDetail.taxpayerNo }}</text>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="order-info box">
			<text class="section-title">订单信息</text>
			<view class="info-row">
				<text>开票订单</text>
				<text class="info-value">{{ invoiceDetail.orderId }}</text>
			</view>
		</view>

		<!-- 发票信息 -->
		<view class="email-info box">
			<text class="section-title">订单信息</text>
			<view class="info-row">
				<text>电子邮箱</text>
				<text class="info-value">{{ invoiceDetail.email }}</text>
			</view>
		</view>

		<!-- 重开发票按钮 -->
		<view class="reissue-btn" @tap="reissueInvoice">
			重开发票
		</view>
	</view>
</template>

<script>
	import { formatMinutes, formatTimestamp } from '@/utils/index.js';
	export default {
		data() {
			return {
				invoiceId: 0,
				invoiceDetail: null
			}
		},
		onLoad({ id }) {
			this.invoiceId = id;
			this.getInvoiceDetail();
		},
		methods: {
			
			getInvoiceDetail() {
				this.$http_api.getInvoiceDetail({ id: this.invoiceId }).then(res => {
					this.invoiceDetail = res;
				})
			},
			
			reissueInvoice() {
				uni.navigateTo({
					url: '/pages/user/users/invoice/apply?id=' + this.invoiceDetail.orderId
				})
			}
		},
		filters: {
			formatTimes(time) {
				if (!time) return '无';
				const data = formatTimestamp(time);
				return data.date + ' ' + data.time
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx;
		background-color: #F5F5F5;
		min-height: 100vh;
	}

	.box {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
		display: block;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		font-size: 28rpx;
		border-bottom: 1px solid #F5F5F5;
		
		&:last-child {
			border-bottom: none;
		}
		
		text:first-child {
			color: #333;
		}

		.info-value {
			color: #999;
			text-align: right;
			flex: 1;
			margin-left: 20rpx;
			
			&.status {
				color: #FF4600;
			}
		}
	}

	.reissue-btn {
		position: fixed;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 90%;
		background: #1C6EFB;
		color: #fff;
		text-align: center;
		padding: 25rpx 0;
		border-radius: 50rpx;
		font-size: 32rpx;
	}
</style> 